<!--
 * @Description:
 * @Author BPF
 * @create 2021/12/5 19:37
 -->
<!--default-->
<script>
export default { name: 'filter-type-picker' }
</script>

<!--setup-->
<script setup>
import { computed, onMounted, onUnmounted, reactive, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
  value: {
    type: [String, Number],
    default: ''
  },

  placeholder: {
    // 占位提示问题
    type: String,
    default: '请选择'
  },

  props: {
    // 与options映射的值
    type: Object,
    default: () => ({
      label: 'label',
      value: 'value',
      children: 'children'
    })
  },

  options: {
    // 选项
    default: () => [
      {
        label: '江苏',
        value: '1'
      }
    ]
  }
})
const emit = defineEmits(['confirm', 'update:value'])
defineExpose({ getPickerInstance })

const state = reactive({})
const propsMapsCp = computed(() => {
  return {
    label: 'label',
    value: 'value',
    children: 'children',
    ...props.props
  }
})

// 文字
const labelCp = computed(() => {
  const { options, value, placeholder } = props
  const labelField = propsMapsCp.value.label
  const valueField = propsMapsCp.value.value
  return options.find(v => v[valueField] == value)?.[labelField] || placeholder
})

// @expose
function getPickerInstance() {
  return proxy.$refs.picker.getPickerInstance()
}

function onConfirm(values, indexs) {
  console.log(values, indexs)
  const valueField = propsMapsCp.value.value
  const labelField = propsMapsCp.value.label
  const [item0] = values
  emit('update:value', item0[valueField])
  emit('confirm', {
    label: item0[labelField],
    value: item0[valueField]
  })
}
</script>

<!--render-->
<template>
  <g-popup-picker :columns="props.options" ref="picker" @confirm="onConfirm" :props="props.props">
    <template #reference>
      <div class="filter__item" ref="reference">
        <span>{{ labelCp }}</span>
        <i class="iconfont-bpf-m icon-m-xiangxia1 font-12 pl-2"></i>
      </div>
    </template>
  </g-popup-picker>
</template>

<!--style-->
<style scoped lang="less">
.filter__item {
  display: inline-block;
  &.filter__item {
    margin-left: 0.2rem;
  }
  &.active {
  }
  padding: 0 0.06rem;
  border: 1px solid;
  border-color: transparent transparent #999 transparent;
}
</style>
